<template>
  <div id="UserManagement">
    <!--    筛选搜索-->
    <div id="orderSearch">
<!--      <div class="search">-->
<!--        <div class="searchLeft"><i class="el-icon-search"></i>筛选搜索</div>-->
<!--        <div class="searchRight">-->
<!--          <el-button>重置</el-button>-->
<!--        </div>-->
<!--      </div>-->
      <div class="searchVessels">
        选择订单状态：
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            {{searchState}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="data in options" :key="data.valState" :command="data.valState">{{data.name}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <template>
      <el-table
        ref="singleTable"
        :data="tableData"
        highlight-current-row
        style="width: 100%"
        @selection-change="handleSelectionChange">
<!--        <el-table-column-->
<!--          type="index"-->
<!--          label="用户编号"-->
<!--          min-width="80"-->
<!--          width="80">-->
<!--        </el-table-column>-->
        <!--        订单编号-->
        <el-table-column
          prop="orderId"
          label="订单编号"
          min-width="180"
          width="auto">
        </el-table-column>
        <!--        商品名称-->
        <el-table-column
          prop="goodsName"
          label="商品名称"
          min-width="180"
          width="auto">
        </el-table-column>
        <!--        收货信息-->
        <el-table-column
          prop="addressMessage"
          label="收货信息"
          min-width="180"
          width="auto">
        </el-table-column>
        <!--        订单状态-->
        <el-table-column
          prop="stateNum"
          label="状态"
          min-width="60"
          width="auto">
        </el-table-column>
        <!--        提交时间-->
        <el-table-column
          prop="orderTime"
          label="提交时间"
          min-width="180"
          width="auto">
        </el-table-column>
        <!--        操作-->
        <el-table-column
          prop="operation"
          label="操作"
          width="180">
          <template slot-scope="scope">
            <a class="edit" @click="selectUser(scope.row.orderId,scope.$index)"><i class="el-icon-edit"></i>查看订单</a>
            <a v-if="searchId===4" class="edit" @click="agreeRefund(scope.row.orderId,scope.$index)"><i class="el-icon-edit"></i>同意退款</a>
            <a v-else class="edit" @click="sendOrder(scope.row.orderId,scope.$index)"><i class="el-icon-edit"></i>订单发货</a>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <el-pagination
      class="pages"
      background
      layout="prev, pager, next"
      :total="pages.total"
      :current-page="pages.current"
      :pager-count=5
      @current-change="handleCurrentChange">
    </el-pagination>
<!--    查看订单-->
    <div class="cover" v-if="msg.select">
      <div class="middle">
        <div class="delete" @click="notShow">×</div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="商品名称:">
            <el-input type="textarea" :rows="1" v-model="form.goodsName" disabled></el-input>
          </el-form-item>
          <el-form-item label="商品图片">
            <el-image
              style="width: 100px; height: 100px"
              :src="form.goodsSurfaceimg">
            </el-image>
          </el-form-item>
          <el-form-item label="商品件数">
            <el-input type="textarea" :rows="1" v-model="form.goodsNumber" disabled></el-input>
          </el-form-item>
          <el-form-item label="商品价格">
            <el-input type="textarea" :rows="1" v-model="form.orderPrice" disabled></el-input>
          </el-form-item>
          <el-form-item label="收货地址">
            <el-input type="textarea" :rows="1" v-model="form.addressMessage" disabled>
            </el-input>
          </el-form-item>
          <el-form-item label="创建时间:">
            <el-input type="textarea" :rows="1" v-model="form.orderTime" disabled></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
<!--    订单发货-->
    <div class="cover" v-if="orderSend.select">
      <div class="middle">
        <div class="delete" @click="notShow">×</div>
        <el-form ref="form" :model="sendOrderMsg" label-width="80px">
          <el-form-item label="物流公司">
            <el-input type="textarea" :rows="1" v-model="sendOrderMsg.logisticsCompany"></el-input>
          </el-form-item>
          <el-form-item label="订单号">
            <el-input type="textarea" :rows="1" v-model="sendOrderMsg.orderId" disabled></el-input>
          </el-form-item>
          <el-form-item label="运单号">
            <el-input type="textarea" :rows="1" v-model="sendOrderMsg.waybill">
            </el-input>
          </el-form-item>
        </el-form>
        <button @click="clickSendOrder">发货</button>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'OrderManagement',
  data () {
    return {
      // 订单状态
      searchState: '未发货订单',
      searchId: 3,
      options: [
        {
          name: '未完成的订单',
          valState: 0
        },
        {
          name: '已完成的订单',
          valState: 1
        },
        {
          name: '超时取消的订单',
          valState: 2
        },
        {
          name: '未发货订单',
          valState: 3
        },
        {
          name: '申请退款的订单',
          valState: 4
        },
        {
          name: '已发货的订单',
          valState: 5
        },
        {
          name: '退款成功',
          valState: 6
        }
      ],
      tableData: [],
      // 分页
      pages: {
        // 每页十条，共几条
        total: 0,
        // 当前页数
        vals: 1,
        // 自定义第几页
        current: 1
      },
      msg: {
        select: false
      },
      orderSend: {
        select: false
      },
      arr: '',
      form: {},
      // 发货信息
      sendOrderMsg: {
        logisticsCompany: '',
        orderId: '',
        waybill: ''
      }
    }
  },
  methods: {
    // 点击发货
    clickSendOrder () {
      if (this.sendOrderMsg.logisticsCompany === '') {
        this.$message('请输入物流公司')
      } else if (this.sendOrderMsg.orderId === '') {
        this.$message('请输入订单号')
      } else if (this.sendOrderMsg.waybill === '') {
        this.$message('请输入运单号')
      } else {
        this.deliverGoods()
      }
    },
    // 管理员发货
    deliverGoods () {
      this.$axios({
        url: '/Menu/Admin/deliverGoods',
        method: 'post',
        params: {
          logisticsCompany: this.sendOrderMsg.logisticsCompany,
          orderId: this.sendOrderMsg.orderId,
          waybill: this.sendOrderMsg.waybill
        }
      }).then(data => {
        if (data.data.code === 200) {
          this.$message('订单发货成功')
          this.orderState()
        } else {
          this.$message(data.data.message)
        }
        this.notShow()
      }).catch(err => {
        console.log(err.toString())
      })
    },
    // 同意退款
    agreeRefund (id, index) {
      const h = this.$createElement
      this.$msgbox({
        title: '消息',
        message: h('p', null, [
          h('span', null, '你确定要同意退款订单编号'),
          h('i', { style: 'color: teal' }, this.tableData[index].orderId)
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.confirmButtonText = '执行中...'
            // setTimeout(() => {
            //   done()
            //   setTimeout(() => {
            //     instance.confirmButtonLoading = false
            //   }, 300)
            // }, 3000)
            this.$axios({
              method: 'post',
              url: '/Menu/Admin/resolveRefound',
              params: {
                orderId: id
              }
            }).then(data => {
              done()
              instance.confirmButtonLoading = false
              this.$message(data.data.message)
              this.orderState()
            }).catch(err => {
              console.log(err)
            })
          } else {
            done()
          }
        }
      }).then(action => {
      })
    },
    // 下拉菜单
    handleCommand (command) {
      this.searchId = command
      this.searchState = this.options[parseInt(command)].name
      this.pages.vals = 1
      this.orderState()
    },
    // 订单
    orderState () {
      this.$axios({
        url: '/Menu/Admin/queryOrderByPage',
        params: {
          pageStart: this.pages.vals,
          state: this.searchId,
          pageSize: 10
        }
      }).then(data => {
        console.log(data)
        this.pages.total = data.data.object.total
        this.tableData = data.data.object.list
        for (var i = 0; i < data.data.object.list.length; i++) {
          this.tableData[i].stateNum = this.nums(this.tableData[i].state)
        }
      }).catch(err => {
        console.log(err.toString())
      })
    },
    // 头像
    errorHandler () {
      return true
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleCurrentChange (val) {
      // 当前页数
      this.pages.vals = val
      this.orderState()
    },
    // 关闭弹窗
    notShow () {
      this.msg.select = false
      this.orderSend.select = false
      this.sendOrderMsg.logisticsCompany = ''
      this.sendOrderMsg.orderId = ''
      this.sendOrderMsg.waybill = ''
    },
    froms (ne) {
      console.log(ne)
    },
    // 订单发货
    sendOrder (id, index) {
      console.log(id, index)
      this.orderSend.select = true
      this.sendOrderMsg.orderId = id
    },
    // 查询用户
    selectUser (id, index) {
      this.arr = index
      this.$axios({
        url: '/Menu/Admin/queryByOrder',
        params: {
          orderId: id
        }
      }).then(data => {
        const msg = data.data
        if (msg.code === 200) {
          this.form = msg.object
          this.msg.select = !this.msg.select
        } else {
          this.$message(msg.message)
        }
      }).catch(err => {
        console.log(err)
      })
    }
  },
  computed: {
    nums (h) {
      return (h) => {
        if (h === 0) {
          return '未完成'
        } else if (h === 1) {
          return '完成'
        } else if (h === 2) {
          return '超时取消'
        } else if (h === 3) {
          return '未发货'
        } else if (h === 4) {
          return '申请退款'
        } else if (h === 5) {
          return '已发货'
        } else if (h === 6) {
          return '退款成功'
        }
      }
    }
  },
  mounted () {
    this.orderState()
  }
}
</script>

<style>
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #FD7A3A !important;
  color: #fff !important;
}

.el-form-item__label {
  text-align: right !important;
}

.cell {
  text-align: center !important;
  overflow: visible !important;
}
</style>
<style lang="less" scoped>
#UserManagement {
  width: 100%;
  padding: 15px;
  background-color: rgb(255, 244, 231);

  #orderSearch {
    width: 100%;
    background-color: #fff;
    padding: 20px;
    margin-bottom: 20px;
  }

  .stateSpan {
    display: inline-block;
    width: 265px;
  }

  .stateBtn {
    padding: 7px 20px !important;
  }

  .pages {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  a {
    text-decoration: none;
    color: rgb(255, 149, 18);
    margin-right: 10px;
    font-size: 12px;
    cursor: pointer;
  }

  .arrow {
    position: relative;

    &:hover .more {
      display: block;
    }

    .more {
      width: 132px;
      height: 30px;
      line-height: 30px;
      background-color: #fff;
      border: 1px solid #e6ebf5;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
      border-radius: 5px;
      position: absolute;
      top: -5px;
      right: 0;
      z-index: 999;
      display: none;
    }
  }

  .cover {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, .6);
    z-index: 777;

    .middle {
      width: 500px;
      max-width: 100%;
      height: 500px;
      max-height: 100%;
      background-color: #fff;
      overflow: auto;
      padding: 40px 20px 20px 20px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      button{
        display: block;
        width: 100px;
        height: 40px;
        background-color: rgba(255, 149, 18, 1);
        margin: 0 auto;
        outline: none;
        color: #fff;
        border-radius: 5px;
        cursor: pointer;
        &:active{
          background-color: rgba(255, 149, 18, .7);
        }
      }

      .delete {
        width: 25px;
        height: 25px;
        font-size: 20px;
        font-weight: 600;
        cursor: pointer;
        position: absolute;
        top: 0;
        right: 0;
        text-align: center;
        line-height: 20px;
      }
    }
  }
}
</style>
